<template>
    <el-menu 
        :collapse="isCollapse"
        :default-active="defaultActive"
        class="el-menu-vertical-demo demo"
        background-color="#001529"
        text-color="#fff"
        active-text-color="rgb(45, 140, 240)">
        <nav-item :menuChild="menu" :collapse="isCollapse" @listenClick="navTreeClick"></nav-item>
    </el-menu>
</template>

<script>
import navItem from "./navitem"
export default {
    name:'navigation',
    components:{
        navItem
    },
    props:{
        menu:Array,
        isCollapse:Boolean
    },
    data(){
        return {
            defaultActive:''
        }
    },
    methods:{
        /**菜单点击 */
        navTreeClick(item){
            this.$emit('listenClick',item);
        }
    },
    created(){
        this.defaultActive = this.$route.fullPath
    }
}
</script>

<style lang="stylus">
.demo
  height 100vh
  &.el-menu--collapse
    width 76px
  &:not(.el-menu--collapse)
    width 100%
  .timebox
    width 200px
    background-color #031833
    height 69px
    padding 10px 20px
    position relative
    bottom 0
    margin-top 12px
    box-sizing border-box
    animation boxshow .3s 
    >div
        color #757575
        font-size 12px
        line-height 25px
    >div:last-child
        margin-bottom 0
</style>